<template>
    <div class="container">
        <div class="tab-radius">
            <tab-radius
                :list="['统计分析', '销售明细', '退款明细']"
                :active="payIndex"
                @change="onPayTab"
                divided="100%"
            />
        </div>
        <!-- tab=0的部门 统计分析 -->
        <div>
            <statistics :payIndex="payIndex" />
        </div>
        <!-- tab=1的部门 销售记录 -->
        <div>
            <business :payIndex="payIndex" />
        </div>
        <div>
            <vendition :payIndex="payIndex" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import uchartsOpts from '@/utils/ucharts'
import { ref } from 'vue'
import statistics from '@/packageQuick/pages/score/statistics/statistics.vue'
import vendition from '@/packageQuick/pages/score/vendition/vendition.vue'
import business from '@/packageQuick/pages/score/business/business.vue'
import { onReachBottom } from '@dcloudio/uni-app'

/* 切换tab栏索引 */
const payIndex = ref(0)
const onPayTab = (index: number) => {
    console.log(index, 'indexindex')
    payIndex.value = index
}

onReachBottom(() => {
    // eslint-disable-next-line no-constant-condition
    if (payIndex.value === 1) {
        uni.$emit('onReachBottom')
        // eslint-disable-next-line no-empty
    } else if (payIndex.value === 2) {
        uni.$emit('onReachBottomTwo')
    }
})
</script>

<style lang="scss" scoped>
.container {
    background: $white;
    min-height: 100vh;
}

.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}

.charts-box {
    padding: 20rpx 0;
    border-radius: 8rpx;
    background: #fafafc;
    margin: 80rpx auto;
}
.operate-table {
    .table-title {
        .title {
            font-size: $font-base;
        }
    }
    .color-green {
        background: $green;
    }
}
</style>
